<template>
	<div ref="bsWrapper" class="button-tabs-wrapper">
		<better-scroll class="button-tabs" ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: true }">
			<div ref="tabRef" class="button-tab-wrapper">
				<ButtonTab
					:is-active="activeTab === item.path"
					v-for="item in tabsMenuList"
					:key="item.path"
					:dark-mode="themeConfig.isDark"
					:primary-color="themeConfig.primary"
					:closable="item.close"
					@click="tabClick(item)"
					@close="tabRemove(item.path)"
				>
					<el-icon class="tabs-icon" v-if="item.icon && themeConfig.tabsIcon">
						<component :is="item.icon"></component>
					</el-icon>
					{{ item.title }}
				</ButtonTab>
			</div>
		</better-scroll>
	</div>
</template>

<script setup lang="ts">
import { computed, watch, ref, nextTick, onMounted } from 'vue'
import { useElementBounding } from '@vueuse/core'
import BetterScroll from '@/components/BetterScroll/index.vue'
import ButtonTab from './components/ButtonTab.vue'

interface TabProps {
	modelValue: string
	tabsMenuList: any[]
	themeConfig: any
}
const props = defineProps<TabProps>()

type EmitProps = {
	(e: 'update:modelValue', val: string): void
	(e: 'tab-click', path: string): void
	(e: 'tab-remove', path: string): void
	(e: 'scroll', clientX: number): void
}

const emit = defineEmits<EmitProps>()

const activeTab = computed({
	get() {
		return props.modelValue
	},
	set(val: string) {
		emit('update:modelValue', val)
	}
})

// Tab Click
const tabClick = (obj: any) => {
	emit('tab-click', obj)
}

// Remove Tab
const tabRemove = (path: string) => {
	emit('tab-remove', path)
}

const bsWrapper = ref<HTMLElement>()
const { width: bsWrapperWidth, left: bsWrapperLeft } = useElementBounding(bsWrapper)

const bsScroll = ref()

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleScroll = (clientX: number) => {
	const currentX = clientX - bsWrapperLeft.value
	const deltaX = currentX - bsWrapperWidth.value / 2
	if (bsScroll.value) {
		const { maxScrollX, x: leftX } = bsScroll.value.instance
		const rightX = maxScrollX - leftX
		const update = deltaX > 0 ? Math.max(-deltaX, rightX) : Math.min(-deltaX, -leftX)
		bsScroll.value?.instance.scrollBy(update, 0, 300)
	}
}

// 获取当前激活的tab的clientX
const tabRef = ref<HTMLElement>()
const getActiveTabClientX = () => {
	nextTick(() => {
		const index = props.tabsMenuList.findIndex(item => item.path === activeTab.value)
		if (tabRef.value && tabRef.value.children.length && index > -1) {
			const activeTabElement = tabRef.value.children[index]
			const { x, width } = activeTabElement.getBoundingClientRect()
			const clientX = x + width / 2
			setTimeout(() => {
				handleScroll(clientX)
			}, 50)
		}
	})
}

onMounted(() => {
	getActiveTabClientX()
})

watch(activeTab, () => {
	getActiveTabClientX()
})
</script>

<style lang="scss" scoped>
.button-tabs-wrapper {
	flex: 1;
	height: 100%;
	padding: 0 10px;
	overflow: hidden;
}
.button-tabs {
	width: 100%;
	.button-tab-wrapper {
		display: flex;
		align-items: center;
		height: 100%;
	}
}
</style>
